<template>
   <div class="person">
    <h2>需求:当前水温达到60,或水位达到80CM时,给服务器发送请求</h2>
    <h2>当前水温:{{ temp }}C</h2>
    <h2>当前水位:{{ height }}CM</h2>
    <button @click="changeTemp">水温+10</button>
    <button @click="changeHegit">水位+1</button>
   </div>
</template>

<script setup name="Person01" lang="ts">
   import { ref,watch , watchEffect} from 'vue'
   // 数据
   let temp = ref(10)
   let height = ref(0)
   // 方法
   function changeTemp(){
    temp.value+=10
   }
   function changeHegit(){
    height.value+=10
   }

   // 监视 --- watch实现
   //    watch([temp,height],(value)=>{
   //     // 从value中获取最新的水温(newTemp),最新的水位(newHeight)
   //     let [newTemp,newHeight] = value
   //     if(newTemp>=60 || newHeight>=80){
   //         console.log('给服务器发送请求')
   //     }
   //     console.log(value)
   //    })
 
    // 监视 --- watchEffect实现  这个不需要监听哪一个具体的值
    watchEffect(()=>{
        console.log("@")
        if(temp.value >= 60 || height.value >= 80){
            console.log('给服务器发送请求')
        }
    })
</script>

<style>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button{
        margin : 0 10px;
    }
</style>